<template>
  <div class="dialogWrapper">
    <el-dialog
      :title="title"
      v-if="visible"
      :visible.sync="visible"
      width="900px"
      top="5vh"
      :before-close="handleClose"
      custom-class="check-dialog"
      append-to-body
    >
      <div class="content">
        <div class="consultant-info">
          <div class="left-info">
            <img
              class="consultant-header"
              :src="selectedRow.personPhoto || defaultImg"
            />
            <div class="consultant-info">
              <span class="user">{{ selectedRow.personName }}</span>
              <span class="consultant"
                >负责的顾问：{{ consultantName }}</span
              >
            </div>
          </div>
          <div class="right-score">
            <div class="service-score">
              <div class="score-info">
                <span class="score" style="color: #957fff">{{
                  selectedRow.rateScore
                }}</span>
                <span class="service-name">平均分</span>
              </div>
              <div class="vertical-gray-higher"></div>
              <div class="score-info">
                <span class="score">{{ getOrderContent(10) }}</span>
                <span class="service-name">服务态度</span>
              </div>
              <div class="vertical-gray-higher"></div>
              <div class="score-info">
                <span class="score">{{ getOrderContent(20) }}</span>
                <span class="service-name">服务质量</span>
              </div>
              <div class="vertical-gray-higher"></div>
              <div class="score-info">
                <span class="score">{{ getOrderContent(30) }}</span>
                <span class="service-name">服务效率</span>
              </div>
            </div>
          </div>
        </div>
        <div class="feedback-content">
          <div class="topic-title">
            <div class="vertical-orange"></div>
            <div class="title-name">服务反馈</div>
          </div>
          <div class="comments" style="white-space: pre-line">
            {{ getOrderContent(301) }}
          </div>
        </div>
        <div class="picture-comments" v-if="pictureCommentsList!= ''">
          <div class="title-name">照片：</div>
          <img
            v-for="(item, index) in pictureCommentsList"
            :key="index"
            :src="item"
            class="picture-item"
            @click="showBigImage(item)"
          />
        </div>
      </div>
      <div class="operation">
        <el-button class="btn" type="primary" @click="handleClose"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--显示放大图片的组件-->
    <BigImage
      :visible="photoVisible"
      :url="bigImgUrl"
      @closeClick="
        () => {
          photoVisible = false;
        }
      "
    ></BigImage>
  </div>
</template>

<script>
import BigImage from "./bigImage.vue";
export default {
  name: "FeedBackResult",
  components: { BigImage },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRow: {
      type: Object,
      default: () => {},
    },
    consultantName: {
      type: String,
      default: "",
    },
  },
  watch: {
    selectedRow: {
      handler(val) {
        this.title = val.personName + "评价反馈-非付费用户评价";
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      defaultImg:
        "https://upload.yl1001.com/upload/files/view?file=qIM,p2vs/R8zvWkAv0LAu47FTc4DsdwyTWFo=CLv=WvnR-tVvHMXft=Zo=60-.png",
      pictureCommentsList: "",
      rateInfo: {},
      photoVisible: false,
      
      bigImgUrl: "",
    };
  },

  created() {
    //   this.getOrderDetailFn(this.selectedRow.id);
    let result = "";
    this.selectedRow.rateList.forEach((item) => {
          if (item.rateType === 201) {
            var list = item.rateContent;
            list = list.split("|");
            console.log("----------rateType === 201---------->",list);
            result = list; //评价图片--数组this.pictureCommentsList.split("|");
          }
        });
    this.pictureCommentsList = result;
  },
  mounted() {},
  methods: {
    //   async getOrderDetailFn(orderId) {
    //     const params = {
    //       orderId: orderId,
    //     };
    //     const res = await getOrderDetail(params);
    //     if (res.code == 200) {
    //       this.rateInfo = res.data;
    //       if (res.data.detail[201] != "") {
    //         this.pictureCommentsList = res.data.detail[201];
    //         this.pictureCommentsList = this.pictureCommentsList.split("|");
    //       }
    //     }
    //   },
    getOrderContent(rateType) {
      let result = "";
      if (rateType === 10 || rateType === 20 || rateType === 30) {
        this.selectedRow.rateList.forEach((item) => {
          if (item.rateType === rateType) {
            console.log("-----getOrderContent----------_>",rateType,item.rateScore);
            result = item.rateScore;
          }
        });
      }
      if (rateType === 201) {
        this.selectedRow.rateList.forEach((item) => {
          if (item.rateType === 201) {
            var list = item.rateContent;
            list = list.split("|");
            console.log("----------rateType === 201---------->",list);
            result = list; //评价图片--数组this.pictureCommentsList.split("|");
          }
        });
      }
      if (rateType === 301) {
        this.selectedRow.rateList.forEach((item) => {
          if (item.rateType === 301) {
            result = item.rateContent; //评价文字
          }
        });
      }
      return result;
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    showBigImage(e) {
      
      //点击图片函数，点击后，把photoVisible设置成true
      if (e != "") {
        this.photoVisible = true;
        this.bigImgUrl = e;
        console.log("---------showBigImage----------->",this.photoVisible,this.bigImgUrl);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogWrapper {
  height: 82vh;
}
.content {
  position: relative;
  height: 620px;
  background: url("../../../../assets/images/dialogBg.png") no-repeat;
  background-position: center top;
  background-size: 100% 22%;
  padding: 30px 56px;
  .consultant-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .left-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      .consultant-header {
        width: 48px;
        height: 57px;
        border-radius: 16px;
      }
      .consultant-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 57px;
        justify-content: space-between;
        margin-left: 27px;
        .user {
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          font-size: 24px;
          color: rgba(0, 0, 0, 0.85);
        }
        .consultant {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: rgba(0, 0, 0, 0.85);
        }
      }
      span {
        font-weight: 800;
        color: #222222;
        font-size: 20px;
      }
    }
    .right-score {
      .service-score {
        display: flex;
        flex-direction: row;
        margin-top: 15px;

        .score-info {
          width: 80px;
          height: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .score {
            font-weight: 800;
            color: #222222;
            font-size: 20px;
          }

          .service-name {
            font-weight: 400;
            color: #666666;
            font-size: 16px;
          }
        }

        .vertical-gray-higher {
          width: 2px;
          height: 42px;
          background: #e6e6e6;
          margin: 0 28px;
        }
      }
    }
  }
  .feedback-content {
    .topic-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 12px;
      margin-top: 30px;
      .vertical-orange {
        width: 3px;
        height: 14px;
        background: #f75a3e;
        border-radius: 2px;
        margin-right: 12px;
      }

      .title-name {
        font-size: 18px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #222222;
      }
    }
    .comments {
      width: 100%;
      height: 185px;
      background-color: #f9f9f9;
      padding: 14px;
      border-radius: 8px;
      overflow-y: scroll;
      line-height: 25px;
    }
  }
  .picture-comments {
    margin-top: 30px;
    .title-name {
      margin-bottom: 10px;
    }
    .picture-item {
      width: 110px;
      height: 110px;
      border-radius: 8px;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
.operation {
  width: 100%;
  padding: 15px 0;
  border-top: 1px solid $grey-2;
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  z-index: 999;
  border-radius: 8px;

  .btn {
    width: 200px;
  }

  ::v-deep .el-button--primary.is-plain,
  .el-button--primary.is-plain {
    background-color: #fff;
    border-color: $primary-color;
  }

  ::v-deep .el-button--primary.is-plain:hover,
  .el-button--primary.is-plain:focus {
    color: $primary-color;
  }
}
::v-deep .el-dialog__header {
  padding-bottom: 20px;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
}

::v-deep .el-input .el-input__inner {
  height: 28px;
}

::v-deep .check-dialog {
  border-radius: 8px;
}

::v-deep .el-form-item__error {
  position: absolute;
  right: -170px;
  top: 12px;
  left: 180px;
}

::v-deep .el-input__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
</style>
